import React, { useState } from 'react'

export default function TestuseState() {
  // 1.只能在函数式组件最外面使用hook
  // 2.不要在循环，条件盘点或者子函数中使用Hook
  // 只能在react函数式组件中使用，不能在JavaScript函数中使用
  const [refresf, setRefresf] = useState(true)
  const [counter, setCounter] = useState(0)
  const [firend, setFirend] = useState(['aa', 'bb'])
  const [student, setStudent] = useState([
    {
      name: 'zjd',
      age: 18,
    },
    {
      name: 'qq',
      age: 17,
    },
  ])
  function addOneAgeClick(item) {
    item.age += 1
    setStudent([...student])
  }

  function addTwoAgeClick(index) {
    const newStudents = [...student]
    newStudents[index].age += 2
    setStudent(newStudents)
  }
  function addThreeAgeClick(item) {
    item.age += 3
    setRefresf(!refresf)
  }
  return (
    <>
      {refresf}
      <div style={{ padding: '20px', textAlign: 'center', width: '50px', backgroundColor: 'pink' }}> {counter}</div>

      <button style={{ textAlign: 'center' }} onClick={() => setCounter(counter + 1)}>
        加
      </button>
      <button style={{ textAlign: 'center' }} onClick={() => setCounter(aaa => aaa - 1)}>
        减
      </button>
      <hr />
      <button onClick={() => setFirend([...firend, 'ccc'])}>添加朋友1</button>
      {firend.map((item, index) => {
        return <div key={index}>{item}</div>
      })}
      <hr />
      {student.map((item, index) => {
        return (
          <div key={item.name}>
            年龄： {item.age} 姓名： {item.name}
            <button onClick={() => addOneAgeClick(item)}>年龄加 1</button>
            <button onClick={() => addTwoAgeClick(index)}>年龄加 2</button>
            <button onClick={() => addThreeAgeClick(item)}>年龄加 3</button>
          </div>
        )
      })}
    </>
  )
}
